<template>
  <el-drawer
    v-model="showDrawer"
    :title="$t(`${props.from === 'send' ? '发送成功' : '订单详情'}`)"
    size="480px"
    @close="emit('close')"
  >
    <el-card v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>{{ $t("基本信息") }}</span>
        </div>
      </template>
      <template v-for="item in coinDetailList">
        <div v-if="item.show" class="detailItem">
          <span style="flex-shrink: 0" class="mb-1 text-color1">{{
            item.name
          }}</span>
          <div
            style="word-break: break-all"
            :class="item.color ? item.color : ''"
          >
            <a :href="item.tx_url" target="blank" v-if="item.canCopy"></a>
            <p v-else>
              {{ item.value
              }}<span v-if="item.showCopy" class="ml-2"
                ><el-icon color="#D9001B" @click="copyToClipboard(item.value)"
                  ><CopyDocument /></el-icon
              ></span>
            </p>
          </div>
        </div>
      </template>
    </el-card>
    <el-card style="margin-top: 1.25rem" v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>{{ $t("审核信息") }}</span>
        </div>
      </template>
      <template v-for="item in coinDetailReviewList">
        <div v-if="item.show" class="detailItem">
          <span style="flex-shrink: 0" class="mb-1 text-color1">{{
            item.name
          }}</span>
          <div
            style="word-break: break-all"
            :class="item.color ? item.color : ''"
          >
            {{ item.value }}
          </div>
        </div>
      </template>
    </el-card>
  </el-drawer>
</template>
<script setup>
import { ref, reactive, watch, toRefs, computed } from "vue";
import { getWalletBillDetailNewApi } from "@/api/wallet/index";
import { useI18n } from "vue-i18n";
import { dayjs } from "element-plus";
import _ from "lodash";
const { t } = useI18n();

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  bill_no: {
    type: String,
    default: "",
  },
  from: {
    type: String,
    default: "records",
  },
});
const emit = defineEmits(["close"]);
const loading = ref(true);
const showDrawer = ref(false);
watch(
  () => props.show,
  (newVal) => {
    showDrawer.value = newVal;
  },
  { immediate: true }
);
const status = computed(() => {
  return {
    0: t("进行中"),
    1: t("成功"),
    2: t("失败"),
  };
});
const merStatus = computed(() => {
  return {
    0: t("审核中"),
    1: t("通过"),
    2: t("拒绝"),
  };
});
const coinData = reactive({});

const coinDetailList = computed(() => {
  return [
    {
      name: t("订单状态"),
      value: status.value[coinData.status] || "--",
      show: true,
      color:
        coinData.status == 0
          ? "text-color4"
          : coinData.status == 1
          ? "text-color2"
          : "text-color3",
    },
    { name: t("订单号"), value: coinData.bill_no, show: true },
    {
      name: t("订单类型"),
      value: coinData.trade_type ? coinData.trade_type : "--",
      show: true,
    },
    {
      name: t("接收地址"),
      value: coinData.to_address || "--",
      show: true,
      showCopy: coinData.to_address ? true : false,
    },
    // { name: t("币种名称"), value: coinData.coin_name },
    // { name: t("主链名称"), value: coinData.chain_name },
    {
      name: t("数量"),
      value: coinData?.sg + coinData?.amount + " " + coinData?.coin_name,
      show: true,
    },
    {
      name: t("手续费"),
      value: coinData.fee + " " + coinData.coin_name,
      show: true,
    },
    {
      name: t("交易HASH"),
      value: coinData.tx_hash || "--",
      show: coinData.tx_url ? true : false,
      showCopy: true,
      canCopy: true,
      tx_url: coinData?.tx_url,
    },
    // {
    //   name: t("创建订单时间"),
    //   value: dayjs(coinData.create_time * 1000).format("YYYY-MM-DD HH:mm:ss"),
    // },
    {
      name: t("交易时间"),
      value:
        dayjs(coinData.create_time * 1000).format("YYYY-MM-DD HH:mm:ss") ||
        "--",
      show: true,
    },
  ];
});
const coinDetailReviewList = computed(() => {
  return [
    // { name: t("商户审核"), value: status[coinData.status], show: true },
    // { name: t("审核结果"), value: coinData.bill_no, show: true },
    // {
    //   name: t("审核时间"),
    //   value:
    //     dayjs(coinData.confirm_time * 1000).format("YYYY-MM-DD HH:mm:ss") ||
    //     "--",
    //   show: true,
    // },
    {
      name: t("平台审核"),
      value: merStatus.value[coinData?.audit_status] || "--",
      show: true,
      color:
        coinData.audit_status == 0
          ? "text-color4"
          : coinData.audit_status == 1
          ? "text-color2"
          : "text-color3",
    },
    { name: t("审核结果"), value: coinData.audit_reason || "--", show: true },
    {
      name: t("审核时间"),
      value: coinData.audit_time
        ? dayjs(coinData.audit_time * 1000).format("YYYY-MM-DD HH:mm:ss")
        : "--",
      show: true,
    },
  ];
});

const getWalletBillDetails = async () => {
  try {
    loading.value = true;
    const res = await getWalletBillDetailNewApi({
      bill_no: props.bill_no,
    });
    for (const item in res) {
      coinData[item] = res[item];
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
    console.log(e);
  }
};
getWalletBillDetails();
</script>
<style lang="scss" scoped>
.detailItem {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 16px;
}
</style>
